<template>
  <div style="height: 100%;border:1px solid red">
    虚拟滚动

    <RecycleScroller
      class="scroller"
      :items="data"
      :item-size="30"
      key-field="key"
      v-slot="{ item }"
    >
      <tr :class="['ant-table-row']">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.address }}</td>
      </tr>
    </RecycleScroller>
  </div>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';

export default {
  components: {
    RecycleScroller,
  },
  data() {
    return {
      columns: [
        { title: 'Name', dataIndex: 'name', key: 'name', width: 150 },
        { title: 'Age', dataIndex: 'age', key: 'age', width: 100 },
        { title: 'Address', dataIndex: 'address', key: 'address', width: 200 },
        // 添加更多列...
      ],
      data: Array.from({ length: 9000 }, (_, i) => ({
        key: i.toString(),
        name: `Edward King ${i}`,
        age: 32,
        address: `London, Park Lane no. ${i}`,
      })),
    };
  },
  methods: {
    customRow(record) {
      return {
        onClick: () => {
          console.log('Clicked row:', record);
        },
      };
    },
  },
};
</script>

<style scoped>
.scroller {
  border: 1px solid green;
  height: calc(100% - 48px); /* Adjust based on your header height */
}
</style>



